<template>
  <el-form ref="formRef" :model="formData" :rules="formRules">
    <el-form-item label="" class="!mb-0">
      <div class="flex items-center">
        <el-checkbox
          v-model="formData.is_use"
          label=""
          :true-label="1"
          :false-label="0"
          size="large"
          class="!mr-0"
        />
        <span class="ml-[10px] el-form-item__label">送优惠券</span>
      </div>
    </el-form-item>
    <el-form-item label="" prop="coupon_id" v-show="formData.is_use">
      <div class="flex-1 max-w-[1000px]">
        <div>
          <coupon-select-popup v-model="formData.coupon_id" ref="selectCouponRef">
            <el-button type="primary" link>选择优惠券</el-button>
          </coupon-select-popup>
        </div>
        <div v-if="couponList.length" class="mt-[10px] w-[100%]">
          <el-table :data="couponList" size="default" ref="couponListTableRef" max-height="400">
            <el-table-column prop="title" label="名称" min-width="130" />
            <el-table-column prop="type_name" label="类型" min-width="130" />
            <el-table-column prop="price" label="面值" min-width="130">
              <template #default="{ row }">
                <span>¥{{ row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="使用门槛" min-width="130">
              <template #default="{ row }">
                <span v-if="row.min_condition_money == '0.00'">无门槛</span>
                <span v-else>满{{ row.min_condition_money }}元可用</span>
              </template>
            </el-table-column>
            <el-table-column label="有效期" min-width="210">
              <template #default="{ row }">
                <template v-if="row.receive_type == 1">
                  <span v-if="row.valid_type == 1"> 领取之日起{{ row.length || '' }} 天内有效</span>
                  <span v-else> 使用截止时间至{{ row.valid_end_time || '' }} </span>
                </template>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="赠券数" min-width="130">
              <template #default="{ row }">
                <el-input-number
                  v-model="formData.coupon_list['id_' + row.id]"
                  :min="1"
                  :precision="0"
                  :max="row.limit_count"
                  controls-position="right"
                  class="!w-[100px]"
                />
              </template>
            </el-table-column>
            <el-table-column :label="t('operation')" align="right" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="deleteCoupon(row)">{{
                  t('delete')
                }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import couponSelectPopup from '@/views/addon/shop/views/goods/components/coupon-select-popup.vue'
import { getSelectedCouponList } from '@/views/addon/shop/api/marketing'
import { t } from '@/lang'
import { FormRules } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const selectCouponRef = ref(null)
const emits = defineEmits(['update:modelValue'])
const formData = ref({
  is_use: 0,
  coupon_id: [],
  coupon_list: {}
})
const formRef = ref(null)

const formRules = reactive<FormRules>({
  coupon_id: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (formData.value.is_use) {
          if (!formData.value.coupon_id.length) {
            callback('请输入选择优惠券')
          }
          formData.value.coupon_id.forEach((id) => {
            if (!formData.value.coupon_list['id_' + id]) {
              callback('请输入赠券数量')
            }
          })
          callback()
        } else {
          callback()
        }
      }
    }
  ]
})
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
const couponList = ref([])

watch(
  () => value.value,
  (nval, oval) => {
    if ((!oval || !Object.keys(oval).length) && Object.keys(nval).length) {
      formData.value = value.value
    }
  },
  { immediate: true }
)

watch(
  () => formData.value,
  () => {
    value.value = formData.value
  },
  { deep: true }
)

watch(
  () => formData.value.coupon_id,
  () => {
    if (formData.value.coupon_id.length) {
      getSelectedCouponList({ coupon_id: formData.value.coupon_id.toString() }).then(({ data }) => {
        couponList.value = data
      })
    } else {
      formData.value.coupon_list = {}
      couponList.value = []
    }
  },
  { deep: true, immediate: true }
)

const verify = async () => {
  let verify = true
  await formRef.value?.validate((valid) => {
    verify = valid
  })
  return verify
}

const showCouponDialog = () => {
  selectCouponRef.value.showDialog()
}

const deleteCoupon = (row: any) => {
  delete formData.value.coupon_list['id_' + row.id]
  formData.value.coupon_id.splice(formData.value.coupon_id.indexOf(row.id), 1)
}

defineExpose({
  verify
})
</script>

<style lang="scss" scoped></style>
